<template>
  <div>
    <el-drawer title="商品详情" :visible.sync="dialog" direction="rtl" ref="drawer" size="45%" :destroy-on-close="true"
      :before-close="close" :wrapperClosable="true">
      <el-form ref="createUserForm" :model="formData" size="small" label-width="110px">
        <br />
        <el-form-item label="商品名称">
          <el-input v-model="formData.productName" readonly clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="商品编号">
          <el-input v-model="formData.productNo" readonly clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="商品原价">
          <el-input v-model="formData.productPrice" type="number" readonly clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="活动优惠价格">
          <el-input v-model="formData.productDiscount" type="number" readonly clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="尺寸/规格" prop="specification">
          <el-input v-model="formData.specification" readonly clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="是否包安装" prop="installState">
          <el-radio-group v-model="formData.installState" size="medium">
            <el-radio v-for="(item, index) in installStateOptions" :key="index" :label="item.value"
              :disabled="formData.installState!=item.value">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="productMemo">
          <el-input v-model="formData.productMemo" type="textarea" readonly :autosize="{minRows: 3, maxRows: 4}"
            :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="封面图">
          <img width="200" height="100" :src='formData.coverUrl' />
        </el-form-item>
        <el-form-item label="商品描述">
          <el-button type="primary" size="small" @click="innerDrawer = true" icon="el-icon-view">预览</el-button>
        </el-form-item>
      </el-form>
      <div class="el-drawer-footer">
        <el-button size="small" @click="dialog = false">取 消</el-button>
      </div>

      <!-- 预览 -->
      <el-drawer title="商品预览" size="48%" :append-to-body="true" :visible.sync="innerDrawer" :wrapperClosable="false">
        <div>
          <div v-html="formData.productContent" style="text-align: center;"></div>
          <div class="el-drawer-footer">
            <el-button type="danger" size="small" @click="innerDrawer = false">关闭预览</el-button>
          </div>
        </div>
      </el-drawer>
      <!-- 预览 End -->
    </el-drawer>
  </div>
</template>

<script>
  import {
    getProductInfo
  } from '@/api/mall.product.js'

  export default {
    data() {
      return {
        dialog: false,
        loading: false,
        innerDrawer: false,
        formData: {
          productId: undefined,
          productName: undefined,
          productNo: undefined,
          productTags: undefined,
          productPrice: undefined,
          productDiscount: undefined,
          productContent: undefined,
          coverUrl: undefined,
          specification: undefined,
          productMemo: undefined,
          installState: undefined,
        },
        installStateOptions: [{
          "label": "裸价（不包安装）",
          "value": 0
        }, {
          "label": "包安装",
          "value": 1
        }],
      }
    },
    methods: {
      // 加载详情
      async loadProductInfo(productId) {
        var res = await getProductInfo(productId);
        var data = res.data;
        for (let key in this.formData) {
          if (data.hasOwnProperty(key)) {
            this.formData[key] = data[key];
          }
        }
      },

      close() {
        this.resetForm();
        this.loading = false;
        this.dialog = false;
      },
      resetForm() {
        if (this.$refs.createUserForm !== undefined) {
          this.$refs.createUserForm.resetFields();
        }
      },
      async open(productId) {
        this.loading = false;
        this.dialog = true;
        this.formData.coverUrl = '';
        this.loadProductInfo(productId);
      },
    }
  }
</script>

<style>
  .el-drawer__header {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #72767b;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 15px;
    padding: 15px 20px 0;
  }

  .el-drawer__body {
    height: calc(100% - 55px) !important;
    overflow-y: auto;
    padding: 5px;
    border-top: #DDDDDD 1px solid;
    margin-bottom: 62px;
    border-bottom: #DDDDDD 1px solid;
  }

  .el-drawer-footer {
    width: 100%;
    text-align: right;
    padding: 15px 20px;
    background-color: white;
    position: absolute;
    bottom: 0;
  }

  .disabled .el-upload--picture-card {
    display: none;
  }
</style>
